<script>
import { defineComponent } from "vue";
import axios from "axios"
import config from "../../utils/config.js"
import testTemplate from "../../assets/testTemplate"
import { useRouter } from 'vue-router'
export default defineComponent({
    name: "App",
    setup() {
        let designer = null
        let spread = null
        let router = useRouter()
        return {
            designer,
            spread,
            router
        }
    },
    data: function () {
        return {
            styleInfo: { height: "calc(100vh - 60px)", width: "100%" },
            spreadOptions: {
                sheetCount: 2,
            },
        };
    },
    methods: {
        designerInitialized(value) {
            this.designer = value;
            this.spread = this.designer.getWorkbook()
            this.loadTemplate()
        },
        loadTemplate() {
            this.spread.fromJSON(testTemplate);
        },
        handleSubmitTemplate() {
            debugger;
            let { template } = this.router.currentRoute.value.query
            sessionStorage.setItem(template,JSON.stringify(this.spread.toJSON({
                includeBindingSource: true,

            })))
            alert("保存检测模板成功")
        },
    },
});
</script>

<template>
    <div class="flex-right" style="margin-right: 50px">
        <el-button type="success" class="save-button" @click="handleSubmitTemplate">保存</el-button>
    </div>
    <div>
        <gc-spread-sheets-designer :styleInfo="styleInfo" :spreadOptions="spreadOptions"
            @designerInitialized="designerInitialized" />
    </div>
</template>

<style>
.save-button {
    background-color: #f28e41;
    border-color: #ffb852;
    padding: 10px 18px;
    font-size: 14px;
}

.flex-right {
    display: flex;
    justify-content: flex-end;
}
</style>